<template>
  <div>
    <div class="shopcart">
      <div class="content" @click="toggleList()">
        <div class="content-left">
          <div class="logo-wrapper">
            <div class="logo" :class="{'highlight':hasSelectedFood}">
              <i class="iconfont icon-shopcart" :class="{'highlight':hasSelectedFood}">&#xe641;</i>
            </div>
            <div class="num" v-show="hasSelectedFood">{{totalCount}}</div>
          </div>
          <div class="price" :class="{'highlight':hasSelectedFood}">￥{{totalPrice}}</div>
          <div class="desc">另需要配送费￥{{deliveryPrice}}元</div>
        </div>
        <div class="content-right" @click.stop.prevent="pay">
          <div class="pay" :class="payEnough">
            {{payDesc}}
          </div>
        </div>
      </div>
      <transition name="fold">
        <div class="shopcart-list" v-show="fold">
          <div class="list-header">
            <h1 class="title">购物车</h1>
            <span class="empty" @click="empty()">清空</span>
          </div>
          <div  class="list-content" ref="listContent">
            <ul>
              <li class="food border-bottom" v-for="(food,index) in selectFoods" :key="index">
                <span class="name">{{food.name}}</span>
                <div class="price">
                  <span>￥{{food.price*food.count}}</span>
                </div>
                <div class="cartcontrol-wrapper">
                  <cart-control :food="food"></cart-control>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </transition>
    </div>
    <transition name="fade">
      <div class="list-mask" v-show="fold" @click="hideList()"></div>
    </transition>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
import CartControl from '../cartcontrol/CartControl'
export default {
  name: 'ShopCart',
  props: {
    deliveryPrice: {
      type: Number,
      default: 0
    },
    minPrice: {
      type: Number,
      default: 0
    },
    selectFoods: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      fold: false
    }
  },
  components: {
    CartControl
  },
  computed: {
    totalPrice () {
      let total = 0
      this.selectFoods.forEach((food) => {
        total += food.price * food.count
      })
      return total
    },
    totalCount () {
      let count = 0
      this.selectFoods.forEach((food) => {
        count += food.count
      })
      return count
    },
    hasSelectedFood () {
      return this.totalCount > 0
    },
    payDesc () {
      if (this.totalPrice === 0) {
        return `￥${this.minPrice}起送`
      } else if (this.totalPrice < this.minPrice) {
        return `还差￥${this.minPrice - this.totalPrice}起送`
      } else {
        return `去结算`
      }
    },
    payEnough () {
      if (this.totalPrice >= this.minPrice) {
        return 'enough'
      } else {
        return 'not-enough'
      }
    }
  },
  wacth: {
    fold () {
      let show = !this.fold
      if (show) {
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new Bscroll(this.$refs.listContent, {
              click: true
            })
          } else {
            this.scroll.refresh()
          }
        })
      }
      return show
    }
  },
  methods: {
    toggleList () {
      if (this.totalCount > 0) {
        this.fold = !this.fold
      }
    },
    empty () {
      this.selectFoods.forEach(food => {
        food.count = 0
      })
      this.fold = false
    },
    hideList () {
      this.fold = false
    },
    pay () {
      if (this.totalPrice >= this.minPrice) {
        window.alert(`支付${this.totalPrice}元`)
        this.selectFoods.forEach(food => {
          food.count = 0
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .shopcart
    position:fixed
    left:0
    bottom:0
    z-index:50
    height:48px
    width:100%
    .content
      display:flex
      background-color:#141d27
      font-size:0
      color:rgba(255,255,255,0.4)
      .content-left
        flex:1
        .logo-wrapper
          display:inline-block
          position:relative
          top:-10px
          height:56px
          width:56px
          margin:0 12px
          padding:6px
          box-sizing:border-box
          vertical-align:top
          border-radius:50%
          background-color:#141d27
          .logo
            width:100%
            height:100%
            border-radius:50%
            text-align:center
            background-color:#2b343c
            &.highlight
              color:#fff
              background:rgb(0,160,220)
            .icon-shopcart
              line-height:44px
              font-size:24px
              color:#80858a
              &.highlight
                color:#fff
          .num
            position:absolute
            top:0
            right:0
            width:24px
            border-radius:12px
            line-height:16px
            text-align:center
            font-size:9px
            font-weight:700
            color:rgb(255,255,255)
            background-color:rgb(240,20,20)
            box-shadow:0px 4px 8px 0px rgba(0,0,0,0.4)
        .price
          display:inline-block
          margin-top:12px
          padding-right:12px
          box-sizing:border-box
          vertical-align:top
          border-right:1px solid rgba(255,255,255,.1)
          font-size:16px
          font-weight:700
          line-height:24px
          &.highlight
            color:#fff
        .desc
          display:inline-block
          padding-left:12px
          margin:12px 0
          box-sizing:border-box
          vertical-align:top
          line-height:24px
          font-size:10px
          font-weight:700
      .content-right
        flex:0 0 105px
        width:105px
        .pay
          height:48px
          line-height:48px
          text-align:center
          font-size:12px
          font-weight:700
          background:#2b333b
          &.not-enough
            background:#2b333b
          &.enough
            background:#00b43c
            color:#fff
    .shopcart-list
      position:absolute
      bottom:48px
      left:0
      width:100%
      z-index:-1
      transition: all 0.5s
      &.fold-transition
        transform: translate3d(0, -100%, 0)
      &.fold-enter, &.fold-leave
        transform: translate3d(0, 0, 0)
      .list-header
        height:40px
        line-height:40px
        padding:0 18px
        border-bottom:1px solid rgba(7,17,27,0.1)
        background-color:#f3f5f7
        .title
          float:left
          font-size:14px
          color:rgb(7,17,27)
        .empty
          float:right
          font-size:12px
          color:rgb(0,120,220)
      .list-content
        max-height:217px
        padding:0 18px
        overflow:hidden
        background-color:#fff
        .food
          position:relative
          padding:12px 0
          box-sizing:border-box
          .name
            line-height:24px
            font-size:14px
            color:rgb(7,17,27)
          .price
            position:absolute
            right:90px
            bottom:12px
            line-height:24px
            font-size:14px
            font-weight:700
            color:rgb(240,20,20)
          .cartcontrol-wrapper
            position:absolute
            right:0
            bottom:6px
  .list-mask
    position:fixed
    top:0
    left:0
    height:100%
    width:100%
    z-index:40
    background: rgba(7, 17, 27, 0.8)
    transition: all 0.5s
    backdrop-filter: blur(10px)
    &.fade-transition
      opacity: 1
      background: rgba(7, 17, 27, 0.6)
    &.fade-enter, &.fade-leave-active
      opacity: 0
      background: rgba(7, 17, 27, 0)
</style>
